<template xmlns="http://www.w3.org/1999/html">
  <div style="margin-left: 20px">
    <el-row>
      <div>
        <div class="col-container">
          <el-col :span="8">
            <span>项目编号：{{ projectInfo.projectCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>项目名称：{{ projectInfo.projectName }}</span>
          </el-col>
          <el-col :span="8">
            <span>采购类别：{{ projectInfo.categoryName }}</span>
          </el-col>
          <el-col :span="8">
            <span>预算金额：{{ projectInfo.budget }}元</span>
          </el-col>
        </div>
      </div>


    <!-- 下载资料模板 -->
    <div style="margin-top: 2em;"> <!-- Adjust the margin-top value as needed -->
      <el-button size="small" type="primary" style="margin-left: 10px" @click="downLoadSteamed">下载验收资料模板</el-button>
    </div>



            <!--          上传验收资料         -->
            <el-col :span="24">
              <div style="margin-top: 4em">
                <br/>
                <span>归档提交状态：{{ projectInfo.archiveSubmitStatus }}</span>
                <br/>
                <el-upload style="margin-left: 10px;display: inline"
                           :show-file-list="false"
                           :headers='token'
                           :action="uploadUrl"
                           ref="upload"
                           accept=".pdf"
                           :on-success="handleSuccess"
                           :on-progress="progress"
                           :on-error="fileError"
                           v-loading.fullscreen.lock="loading"
                           :element-loading-text="progressPercentTitle"
                           element-loading-spinner="el-icon-loading"
                           element-loading-backgroud="rgba(0,0,0,0.1)"
                           :disabled="projectInfo.archiveSubmitStatus === '已提交'"
                >
                  <el-button
                      :disabled="projectInfo.archiveSubmitStatus === '已提交'"
                      :style="projectInfo.archiveSubmitStatus === '已提交' ? 'margin-top: 1em; background-color: #ccc; cursor: not-allowed;' : 'margin-top: 1em;'"
                      size="small"
                      type="primary">
                    上传验收资料
                  </el-button>
<!--                  <div slot="tip" class="el-upload__tip">只能上传pdf文件，且不超过50Mb</div>-->
                </el-upload>
              </div>

                <div style="margin-top: 10px;margin-bottom: 10px" v-if="true">
                    <el-table
                            :data="acceptanceTable"
                            border
                            size="small"
                            style="width: 100%">
                        <el-table-column
                                prop="profileName"
                                min-width="140px"
                                label="验收资料名称"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="uploadTime"
                                min-width="140px"
                                label="上传时间"
                        >
                        </el-table-column>
                        <el-table-column
                                width="120px"
                                label="操作"
                        >
                          <template slot-scope="{$index, row}">
                            <el-popconfirm title="确定删除吗？" @confirm="handleDeleteProject(row)">
                              <el-button
                                  type="text"
                                  style="margin-left: 7px"
                                  :style="{ color: projectInfo.accSubstatus === '已提交' ? 'gray' : 'red' }"
                                  :disabled="projectInfo.accSubstatus === '已提交'"
                                  slot="reference"
                              >
                                删除
                              </el-button>
                              <el-button
                                  type="primary"
                                  slot="action"
                                  style="color: #fff; background-color: #ff4949; border-color: #ff4949;"
                              >
                                确定
                              </el-button>
                            </el-popconfirm>
                          </template>

                        </el-table-column>
                    </el-table>
                </div>
            </el-col>

          <div>
            <el-button
                size="small"
                type="primary"
                :disabled="projectInfo.accSubstatus === '已提交'"
                :style="projectInfo.accSubstatus === '已提交' ? 'margin-top: 1em; background-color: #ccc; cursor: not-allowed;' : 'margin-top: 1em;'"
                @click="submitProject"
            > 提交审批</el-button>
          </div>
      <span>提交状态：{{ projectInfo.accSubstatus }}</span><br>
      <span>审批状态：{{ projectInfo.accApproveStatus }}</span>

    </el-row>
    </div>

</template>

<script>


import {
  getAcceptance,
  getAllProject,
  deleteProject,
  downloadProject,
  submitProject
} from "@/api/projectAcceptance";
import {serverIp} from "../../../public/config";
import downloadFile from "@/utils/downloadFile";
import {sumbitContract} from "@/api/concludeContract";

export default {
    props: {
        projectInfo: {
            type: Object,
            default () {
                return {}
            }
        },
      acceptanceTable: {
            type: [],
            default() {
                return [];
            }
        },

        required: true
    },
    data() {
        return {
            project: {},
            token: { Authorization:localStorage.getItem("token") },
            uploadUrl: `${serverIp}/projectAcceptance/uploadFile/acceptanceProject/${this.projectInfo.projectId}`,
            loading: false,
            supplierName: "", // 供应商名字
            submitStatus:"",
          progressPercentTitle: "", // 展示百分比
          progressPercent: 0, // 进度
        }
    },
    mounted() {
        this.project = this.projectInfo
        this.submitStatus=this.projectInfo.accSubstatus
    },
    watch: {
        projectInfo: {
            // 监听数据发生变化的处理函数
            handler(newV) {
                this.project = JSON.parse(JSON.stringify(newV));//将监听到修改的值赋予到dataAttrs中
            },
            // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            deep: true
        }
    },
    methods: {
      async submitProject() {
        let resTag = await submitProject(this.project.projectId)
        if (resTag.data.code === 200){
          alert("已提交，请等待审核通过")
          // this.projectInfo.accSubstatus = resTag.data.data;
          this.projectInfo.accSubstatus = resTag.data.data.submitStatus;
          this.projectInfo.accApproveStatus = resTag.data.data.accApproveStatus;
        }else {
          this.$message.error(resTag.data.msg)
        }
      },
      // 上传文件时钩子
      progress(event,file,fileList){
        this.loading = true;
        this.progressPercent = Math.floor(event.percent);
        this.progressPercentTitle = "已上传" + this.progressPercent + "%"
      },
        fileError(){
            this.loading=false;
            this.$message.error("失败")
        },
        handleSuccess(res){
          this.loading = false;
            // this.$message.success("上传成功")
          if (res.code === 201){
            alert("上传失败，只能上传PDF文件，请重新上传！")
          }
          this.getAllAcceptance()
        },
        async getAllAcceptance(){
            let resTag = await getAcceptance(this.project.projectId)
            if (resTag.data.code === 200){
                this.acceptanceTable = resTag.data.data;
            }else {
                this.$message.error(resTag.data.msg)
            }
        },

        async downLoadSteamed(){
            let res = await downloadProject()
            downloadFile(res,"采购验收单.doc")
        },

      async handleDeleteProject(row) {
        let resTag = await deleteProject(row.id)
        if (resTag.data.code === 200) {
          alert("删除成功")
          await this.getAllAcceptance()
        } else {
          this.$message.error(resTag.data.msg)
        }
      },
        // async deleteProject(row){
        //   let resTag = await deleteProject(row.id)
        //   if (resTag.data.code === 200){
        //     alert("删除成功")
        //   }else {
        //     this.$message.error(resTag.data.msg)
        //   }
        // }
    }
}

</script>

<style scoped>
.col-container {
  display: flex;
  justify-content: space-between;
}
</style>
